<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <router-link to="/">
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>填写预约单</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </router-link>
        <router-link to="/order">
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-account-box</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>跟踪预约</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </router-link>
        <a href="http://www.hdufocus.cn:8082">
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-android</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>后台管理</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </a>
      </v-list>
    </v-navigation-drawer>
    <v-app-bar app color="black" dark>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title class="font-weight-medium d-none d-md-block headline">FOCUS STUDIO</v-toolbar-title>
      <v-toolbar-title class="ml-8">{{title}}</v-toolbar-title>
    </v-app-bar>

    <v-content>
      <v-row align="center" justify="center">
        <v-img class="mt-4" src="./assets/logo.png" max-width="200"></v-img>
      </v-row>
      <keep-alive>
      <router-view v-if="this.$route.meta.keepAlive"></router-view>
      </keep-alive >
      <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    </v-content>
    <v-footer color="black" app>
      <span class="white--text">&copy; 2019 焦点摄影工作室&#12288;浙ICP备19037306号</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    drawer: false,
    group: null,
    title: "填写预约单"
  }),
  methods: {
    toReservation: function() {
      this.title = "预约单";
    }
  },
  watch: {
    $route: {
      handler(val) {
        let that = this;
        if (val.name === "reservation") {
          that.title = "填写预约单";
        }
        if (val.name === "order") {
          that.title = "跟踪预约";
        }
      },
      deep: true //深度监听
    }
  }
};
</script>